<template>
  <div class="home-area">
    <div class="home-article-list">
      <screen></screen>
      <no-data v-if="articleStore.articleList.length === 0 && !articleStore.loading"></no-data>
      <ul>
        <li v-for="article in articleStore.articleList" :key="article.articleId">
          <Article :article="article"></Article>
        </li>
      </ul>
      <article-loading v-for="i in 5"></article-loading>
      <div class="bottom" v-if="articleStore.articleList.length">
        <span v-loading="bottomLoad" v-if="more">下拉加载更多</span>
        <span v-if="!more">到底啦~</span>
      </div>
    </div>
    <div class="home-side">
      <div class="user-options">
        <user-panel></user-panel>
      </div>

      <div class="ad">
        <button>广告</button>
        <img src="/public/img/ad.jpg" alt="广告招租">
      </div>
      <div class="other">
        <el-affix :offset="commonStore.showHeader?75:5">
          <a-d-panel></a-d-panel>
        </el-affix>
      </div>

    </div>
    <el-backtop :right="100" :bottom="100"/>
  </div>


</template>

<script setup>
import Screen from "@/views/components/home/Screen.vue";
import Article from "@/views/components/article/Article.vue";
import {useCommonStore} from "@/store/commonStore.js";
import {onMounted, ref, watch} from "vue";
import {useArticleStore} from "@/store/articleStore.js";
import ArticleLoading from "@/views/components/article/ArticleLoading.vue";
import NoData from "@/views/components/article/NoData.vue";

const articleStore = useArticleStore();
const commonStore = useCommonStore();
const getArticleList = async (page) => {
  bottomLoad.value = true
  await articleStore.getArticleList(page)
  bottomLoad.value = false
}
let bottomLoad = ref(false);
let more = ref(true)
/**
 * 监视vueUse中的arrivedState，判断滚动条的为止是否到达底部
 */
import {useScroll} from "@vueuse/core";
import UserPanel from "@/views/components/home/UserPanel.vue";
import ADPanel from "@/views/components/home/Other.vue";

let {arrivedState} = useScroll(window);
watch(() => arrivedState.bottom, () => {
  // 发起请求获取下一页数据
  if (articleStore.articleList.length >= articleStore.articleTotal) {
    more.value = false
    return
  }
  if (arrivedState.bottom) {
    getArticleList(articleStore.articleCurrentPage + 1)
  }

})

onMounted(() => {
  getArticleList()
})
</script>

<style lang="scss" scoped>
.home-area {
  width: 100%;
  display: flex;
}

.home-article-list {
  width: 70%;
  margin: 10px;
  background-color: #ffffff;
  padding: 2rem;

  border-radius: 5px;
}

.home-side {
  width: 30%;

  .ad {
    margin: 10px;
    position: relative;
    cursor: pointer;

    button {
      position: absolute;
      bottom: 1rem;
      right: 1rem;
      background-color: rgba(1, 1, 1, 0.3);
      border: none;
      color: #dddddd;
    }

    img {
      width: 100%;
    }
  }

  .other {
    margin: 10px;

  }
}

.bottom {
  width: 100%;
  text-align: center;
  color: #409eff;
}
</style>